<!-- 全部分类 -->
<template>
	<view class="v-classification">
		<view class="v-title">热门分类</view>
		<view class="v-conent flex-wrap">
			<block v-for="(i, j) in hotGoods" :key="j">
				<view class="flex-column v-type" @click="toGos(i)">
					<image style="margin-bottom: 10rpx;" :src="i.pic_url"></image>
					<text>{{ i.name }}</text>
				</view>
			</block>
		</view>
		<view class="v-title">全部分类</view>
		<view class="v-conent flex-wrap">
			<block v-for="(i, j) in classList" :key="j">
				<view class="flex-column v-type" @click="toGos(i)">
					<image style="margin-bottom: 10rpx;" :src="i.pic_url"></image>
					<text>{{ i.name }}</text>
				</view>
			</block>
			<!-- <block v-for="(i, j) in classList" :key="j">
				<view class="flex-column v-type" @click="toGo(i)" >
					<image :src="i.pic_url"></image>
					<text>{{ i.name }}</text>
				</view>
			</block> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		
		return {
			classList:[],
			hotGoods:[],
			uid: uni.getStorageSync('uid'),
		};
	},
	onLoad() {
		this.hotList();
		this.getCateList();
	},
	
	methods: {
		handleLogin() {
			if (this.uid) {
				return true;
			} else {
				uni.navigateTo({
					url: `/pages/login/login`
				});
			}
		},
		// '全部'分类 —— 跳转
		toGo(item) {
			
			if(item.name=='转盘抽奖'){
				this.handleLogin()
			}
			if(item.name=='全部分类'){
				this.$sun.navGo('/pages/classification/classification')
			}else{
				this.$sun.navGo(item.url)
			}
			
		},
		toGos(i){
			this.$sun.navGo('/pages/classification/classification',{category_id:i.id,});
		},
		async hotList() {
			let typeNumber = Number(Number(this.navIndex) + 1);
			const result = await this.$http.get({
				url: this.$api.goodCategorys,
				data: {
					// 1 热门推荐 2 人气热卖
					is_recommend : 1
				}
			});
			if (result.errno == 0) {
				this.hotGoods = result.data;
			}
		},
		
		// 食品获取分类
		async getCateList() {
			const result = await this.$http.get({
				url: this.$api.goodCategorys
			});
			if (result.errno == 0) {
				this.classList = result.data;
			}
		},
	}
};
</script>

<style lang="less">
page {
	background-color: #f7f7f7;
}
.v-classification {
	.v-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx 30rpx;
	}
	.v-conent {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 0 50rpx;
		margin: 30rpx 30rpx 50rpx;
		.v-type {
			margin-top: 60rpx;
			width: calc(100% / 4);
			image {
				width: 60rpx;
				height: 60rpx;
			}
			text {
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
	}
}
</style>
